The recent release of 1.5 has brought many new people to SproutCore, and as our community grows, more and more people are asking how they can help. This week, instead of focusing on whats new, I’m going to focus on how you can contribute to the bleeding edge of SproutCore. I’ll start with my top three suggestions.

1. Contribute to the SproutCore Guides

Back in the beginning of January, we recognized that the biggest challenge to new users trying to learn SproutCore was the limited quality and quantity of documentation. To solve this problem the SproutCore Guides project was born. To date, 15 guides have been completed and made available to the community, drastically improving the help that is available for people. But there’s still more work that can be done.

How can you start helping?

To be able to contribute to the project, the first thing you need to do is build the guides on your own system. In order to do that, do the following:

1. Download and install the guides package

2. Clone the guides source from git://github.com/sproutcore/sproutguides.git (git clone git://github.com/sproutcore/sproutguides.git within the directory you want to work).

3. cd into the cloned directory (sproutguides), and run “guides build” to generate an the output directory, where you can build the files locally.

Once you’ve set up the directory, you can modify any of the files within the source directory.

Next, run “guides generate” to see them reflected in the output. The following video illustrates a typical workflow:

If you’re interested in writing a new guide for a section of SproutCore that hasn’t yet been covered, contact Yehuda at wycats@sproutcore.com with your idea.

2. Contribute to the Source Itself

There are two ways that you can contribute to improving the code of SproutCore itself. 

Report Bugs

The first way you can help is by reporting any bugs that you find while working with SproutCore. We try the best we can to keep them out before releases, but we know they still exist. You can be our eyes and ears letting us know when we have a problem.

You can report these bugs to us by filing an issue within the SproutCore repository on GitHub. Please be as descriptive as you can within your description—we would much rather have too much information than not enough.

Also, if you’re able to write a failing unit test for the bug that you’re reporting, this will enable us to address your issue much faster. Along those lines, you could even go and write unit tests for other issues that have been submitted, and I guarantee you would get on the good side of the core team very quickly.

The following video illustrates how to file issues, and write a unit test:

3. Modify The Source Yourself

The last way for you to help is to directly modify and improve the source code of SproutCore. In order to do that, the first thing to do is to get the source itself. You can git clone our repository from git://github.com/sproutcore/sproutcore.git.

Once you’ve the source, you might need a little direction to be able to know where everything is because the source itself is structured a little differently than a regular SproutCore application. This video walks you through the file structure of the code base:

I won’t go into how to modify the code, because being professional developers, I’m sure you already know how to do that. The only other thing that really needs to be covered is how to run the SproutCore unit tests.

SproutCore relies on its build tools for its unit tests, so the way that you run your tests is a little different than in Ruby or Java. In order to run the SproutCore unit tests, you actually hit a URL in your browser which tells the build tools which tests to run. The URL structure looks like this:

localhost:4020/static/FRAMEWORK_NAME/en/current/tests[/further_refinements*].html

So, for example, if I wanted to run the core_foundation tests, I would hit the following URL:

localhost:4020/static/core_foundation/en/current/tests.html

If I wanted to only run the tests for the controllers in core_foundation, I would hit the following:

localhost:4020/static/core_foundation/en/current/tests/controllers.html

This video will give you an example of how to run those unit tests:

Conclusion

Hopefully this post has given you the motivation and tools to contribute back towards the SproutCore edge. If you run into any issues, feel free to track me down, and I’d be glad to help. You can tweet at me @gregmoeck, or ping me at gmoeck on IRC.

I’ll be back soon with the next post in Dispatches from the Edge; see you then!

We had a great turnout at Tuesday’s San Francisco SproutCore Meetup, kindly hosted again by the folks at Twitter. Nothing like some pizza, beer, and talks about SproutCore to get the week going right :)

For those of you who couldn’t make it in person, we’re posting the recordings of the talks here on the blog! You’ll find the audio quality is better this time around :P

Enjoy!

With the recent release of SproutCore 1.5, it seems like the perfect time for a “Getting Started With SproutCore” refresher. Whether you’re tired of trying to get the benefits of client-side code execution into your server-side apps, or whether you’re tired of trying to get the benefits of multiple platform support into your client-side apps, there’s no better time to give SproutCore a try.

This post will walk you through the very first steps you need to get up and running. It assumes you’re using OS X and have at least some basic familiarity with the command line (come on, it’s not so bad!).

Installation

Installation has been getting simpler and simpler, and the team is working on making this even simpler in the coming releases of SproutCore. Subscribe to the RSS feed to be notified of new posts on the blog; I’ll be sure to post an update once things change.

So let’s get into it; I’ll work my way from the bottom layers on up.

Step 1. Install the Xcode Developer Tools

You’ll need the Xcode Developer Tools to compile some of the RubyGems that the build tools depend on. The appropriate version of Xcode for your current version of OS X should have been included in your install DVD. If not, or if you’ve long-since lost the packaging from your machine, you can get a free copy of Xcode 3.2.6 by signing up for an Apple Developer account. Alternatively, you can buy Xcode from the Mac App Store for $4.99.

Follow the instructions for whichever install path you choose, and report back here when you’re done.

Step 2. Update RubyGems

To update RubyGems, you just need to run one quick command. Open the Terminal and type the following:

<code>sudo gem update --system</code>

Step 3. Install SproutCore

Then, in the Terminal, type this:

<code>gem install sproutcore</code>

Congratulations! You are officially set up with SproutCore. 

You’ll likely want to jump right into your first app:

<code>sc-init HelloWorld
cd hello_world
sc-server</code>

Once the server starts, you can visit http://localhost:4020 in your browser to see your apps. You’ll also want to visit the new SproutCore Guides, which have a ton of new information on getting started, with more being added every day.

So that’s it for now. As I said, things are going to be getting simpler and easier over the next few weeks/months/releases, so check back for updates!

Addendum: Performance Boost!

There’s a noticeable performance benefit to upgrading the preinstalled version of Ruby (1.8.7 as of OS 10.6) to Ruby 1.9.2. The SproutCore Team recommends that you install a newer version of Ruby to take advantage of those performance improvements.

The easiest way to install a new version of Ruby is to use the Ruby Version Manager, RVM. There are a few ways to install RVM, but the recommended method if you have git installed is to open the Terminal and run the following command:

<code>bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)</code>

This will install the very latest version of RVM straight from the github repository. If you don’t have git installed then run this command:

<code>curl -s https://rvm.beginrescueend.com/install/rvm -o rvm-installer     
chmod +x rvm-installer     
./rvm-install latest</code>

Afterwards, to have RVM properly loaded into your Terminal shell, add the following line to the end of your ~/.bash_profile file:

<code>[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # This loads RVM into a shell session </code>

RVM will now load properly into new shells, but is not available in your current shell, so open a new shell and install Ruby 1.9.2:

<code>rvm install ruby-1.9.2</code>

Then, to use Ruby 1.9.2 in a shell you only need to type the following:

<code>rvm use 1.9.2</code>

If you want all new shells to use Ruby 1.9.2, type this:

<code>rvm --default use 1.9.2</code>

Finally, if you run into any trouble installing RVM and Ruby, please refer to the RVM documentation for more help.

Like I said, this is a recommended performance boost. You’ll be just fine with the current version of Ruby as well.

— Tyler Keating

We’re excited to announce the final release of SproutCore 1.5. It’s been almost four months since 1.4.5 shipped, and we have lots of exciting new stuff for you.

Changes

Template View

SproutCore 1.5 offers a brand-new way to define your view layer. If you have an existing application, SC.TemplateView makes it easy to integrate Handlebars-flavored HTML into your view hierarchy. If you’re starting a brand new application, you can design your entire application using just HTML, CSS, and the power of SproutCore’s binding system.

We’ve put together a tutorial that takes you through the process of creating a new template-based SproutCore application from scratch. You’ll learn how to define a model, create a controller structure, create HTML using Handlebars, then hook all of the pieces together using bindings.

Guide: Getting Started with HTML-Based Apps

Community member Greg Moeck created a screencast as part of his Dispatches from the Edge series that shows some of the power of these templates:

Dispatches from the Edge: Template Views

Theme

If you are building a native-style application using SproutCore’s library of controls, we have a great new default theme called Ace 2.0 that looks at home on modern desktop and mobile operating systems.

We’ve also significantly improved theming flexibility for developers that desire their own look-and-feel. You can even include multiple themes in the same application.

To learn how to theme your application, read the guide by Alex Iskander:

Guide: Theming Your App

SCSS and Data URIs

Under the hood, the SproutCore build tools include a new CSS parser called Chance. Chance builds on top of SCSS to provide helpers for doing things like including data URI representations of your images. By using data URIs, you can reduce the overhead of additional HTTP requests.

You also get the benefits of SCSS: variables, nested rules, mixins, selector inheritance, and more.

To learn more about SCSS, see the Sass website:

Sass & SCSS

To learn more about the SproutCore-specific features of Chance, read the guide:

Guide: Using Chance, SproutCore’s CSS Framework

WAI-ARIA Support

The desktop controls in 1.5 are now WAI-ARIA-enabled. WAI-ARIA defines a way to make web applications more accessible to people using assistive devices.

Modular Loading

Your applications can now be split into modules which can be loaded automatically when the user is idle or in response to user events. This allows you to reduce the size of your initial application payload.

For example, if your application contains a preference pane, the user probably does not need the code or resources for that pane to be loaded within the first few seconds of using the application.

You can learn about how modules work by reading the modular loading specification:

Specification: Modular Loading

To learn about how modular loading helped Google improve their load times, read this excellent article from the Gmail team:

Reducing Startup Latency (Note that unlike Google, we load your code as strings instead of block comments.)

Experimental Features

Going forward, we are placing an even higher emphasis on quality. This means that features that we do not feel are yet production-ready, but fill an important need, will be placed into an experimental framework. If you’d like to add an experimental feature to your application, you’ll need to list it in your Buildfile.

For example, if you wanted to use the rewrite of SC.SplitView that is not yet fully documented, you would add the following line to your Buildfile:

config :myapp, required => [:sproutcore, 'sproutcore/experimental/split_view']

Roadmap

In order to keep pace with the rapidly evolving world of web apps, and to ensure the development team remains focused, we will be switching to a six-week release cycle. These faster and more-focused releases will allow us to better react to the needs of the developer community.

We will have an announcement about the planned features shortly.

Getting the Gem

To get the updated gem, type the following in your command line:

gem install sproutcore

If you run into any problems, please contact the SproutCore Google Group or visit us in #sproutcore on irc.freenode.net.

If you find a bug, please file it on our GitHub Issues page.